<template>
	<view class="edit_order_box">
		<view class="edit_instructions_title">修改订单说明</view>
		<view class="edit_instructions_box">
			<view class="instructions_tips">1、您可以对不涉及服务费用变动的订单信息进行修改。</view>
			<view class="instructions_tips mt_16">
				2、如需修改涉及金额变动的服务信息，如“增加或删除服务宠物/服务项目”，您可等待订单接单后购买增值服务或“
				<text class="c_6363FF">取消订单</text>
				"后“
				<text class="c_6363FF">重新下单</text>
				”。
			</view>
		</view>
		<view class="info_box">
			<view class="label_value_box">
				<view class="label_box">联系人</view>
				<view class="value_box">
					<input class="user_input" maxlength="10" placeholder-class="user_input_placeholder" v-model="editInfo.contactsName" placeholder="请输入联系人" type="text" />
				</view>
			</view>
			<view class="label_value_box">
				<view class="label_box">联系电话</view>
				<view class="value_box">
					<input
						class="user_input"
						type="number"
						maxlength="20"
						placeholder-class="user_input_placeholder"
						v-model="editInfo.contactsPhone"
						placeholder="请输入联系电话" />
				</view>
			</view>
		</view>
		<view class="info_box">
			<view class="label_value_box">
				<view class="label_box">上门时间</view>
				<view class="value_box" @click="openPickerTimePopupRef">
					<view class="user_value">{{ handleDoorTime(editInfo.doorTime) }}</view>
					<uni-icons type="right" color="#1B2120" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<view class="info_box">
			<view class="label_value_box">
				<view class="label_box">钥匙交接</view>
				<view class="value_box" @click="handleSetKeyInfo()">
					<view class="user_value">
						{{ getHandoverTypeText(editInfo.handoverType, 1) }} |
						{{ getHandoverTypeText(editInfo.returnType, 2) }}
					</view>
					<uni-icons type="right" color="#1B2120" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<view class="info_box">
			<view class="label_value_box">
				<view class="label_box">其它叮嘱</view>
				<view class="value_box" @click="handleSetRemarksInfo()">
					<view class="user_value">去设置</view>
					<uni-icons type="right" color="#1B2120" size="18"></uni-icons>
				</view>
			</view>
		</view>
	</view>
	<view class="footer_btn_box">
		<view class="xjs-btn-primary config_btn" @click="editOrder()">确认修改</view>
	</view>
	<pickerTimePopup class="pickerTimePopup" ref="pickerTimePopupRef" @confirm="getServiceTime"></pickerTimePopup>
</template>

<script setup>
import { reactive, ref } from "vue";
import pickerTimePopup from "@/pages/petsOrder/components/pickerTimePopup.vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import api from "@/api/index";
import { useStudioStoreToRefs } from "@/store/useStudioStore";
import { useOrderStoreToRefs, resetUseOrderStore } from "@/store/useOrderStore";

const { getKeyInfo, returnKeyInfo, serviceDemandList } = useOrderStoreToRefs();

let { studioBalance, studio, identity } = useStudioStoreToRefs();
let pickerTimePopupRef = ref();
let editInfo = reactive({
	contactsName: "",
	contactsPhone: "",
	doorTime: "",
	handoverType: "",
	handoverRemarks: "",
	returnType: "",
	returnRemarks: "",
	remarks: []
});
let orderId = ref();
let orderType = ref();
let orderInfo = reactive({});
// 交接方式: 0-有人在家;1-密码;2-丰巢存件;3-其他; 4-面交; 5-快递; 6-闪送; 7-放在指定位置;
const getHandoverTypeText = (status, type) => {
	switch (status) {
		case 0:
			return "有人在家";
		case 1:
			return "密码锁";
		case 2:
			return "丰巢存件";
		case 3:
			if (type === 1) {
				return editInfo.handoverRemarks;
			} else if (type === 2) {
				return editInfo.returnRemarks;
			} else {
				return "";
			}
		case 4:
			return "面交";
		case 5:
			return "快递";
		case 6:
			return "闪送";
		case 7:
			return "放在指定位置";
		default:
			return "";
	}
};
const handleSetKeyInfo = () => {
	uni.navigateTo({
		url: "/pages/payment/getKey/index"
	});
};
const handleSetRemarksInfo = () => {
	uni.navigateTo({
		url: "/pages/payment/serviceDemand/index"
	});
};
const handleDoorTime = (data) => {
	if (data) {
		let dataArr = data?.split("~");
		if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
			return "无时间段要求";
		} else {
			return data;
		}
	} else {
		return data;
	}
};
const openPickerTimePopupRef = () => {
	console.log(pickerTimePopupRef.value);
	pickerTimePopupRef.value.open(editInfo.doorTime);
	// currentServiceDate.value = data;
};
const getServiceTime = (data) => {
	// type 1 已选择时间，2 无时间段要求
	if (data?.type == 2) {
		editInfo.doorTime = "00:00~00:00";
	} else {
		editInfo.doorTime = `${data.startTime}~${data.endTime}`;
	}
};
const getDetailsData = async () => {
	let url = "";
	if (orderType.value == -1) {
		url = `/mall/order/detail/${orderId.value}`;
	} else {
		url = `/mall/order/order-detail/dayOrderDetail?id=${orderId.value}`;
	}
	const res = await api({
		method: "get",
		url: url,
		contentType: "json"
	});
	if (res.code === 0) {
		// 服务叮嘱json: [{"type": 0-其他; 1-宠物粮、罐头、零食位置; 2-饮用水位置; 3-猫砂和猫砂盆位置; 4-牵引绳位置, "imgs":[],"remakrs": ""}]
		res.data.remarkList = JSON.parse(res.data?.remarks) || [];
		// res.data.remarkList = [
		// 	{ type: 0, imgs: "/static/logo.png", remarks: "其他" },
		// 	{
		// 		type: 1,
		// 		imgs: "/static/logo.png",
		// 		remarks: "宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置宠物粮、罐头、零食位置"
		// 	},
		// 	{ type: 2, imgs: "/static/logo.png", remarks: "饮用水位置" },
		// 	{ type: 3, imgs: "/static/logo.png", remarks: "猫砂和猫砂盆位置" },
		// 	{ type: 4, imgs: "/static/logo.png", remarks: "牵引绳位置" }
		// ];

		Object.assign(editInfo, {
			contactsName: res.data.contactsName,
			contactsPhone: res.data.contactsPhone,
			doorTime: res.data.doorTime,
			handoverType: ["", null, "null", undefined, "undefined"].includes(getKeyInfo.value.keyMethodsId) ? res.data.handoverType : getKeyInfo.value.keyMethodsId,
			handoverRemarks: getKeyInfo.value.content || res.data.handoverRemarks,
			returnType: ["", null, "null", undefined, "undefined"].includes(returnKeyInfo.value.keyMethodsId) ? res.data.returnType : returnKeyInfo.value.keyMethodsId,
			returnRemarks: returnKeyInfo.value.content || res.data.returnRemarks,
			remarks: serviceDemandList.value.length ? serviceDemandList.value : res.data.remarkList
		});
		serviceDemandList.value = editInfo.remarks;
		getKeyInfo.value.keyMethodsId = editInfo.handoverType;
		getKeyInfo.value.content = editInfo.handoverRemarks;
		returnKeyInfo.value.keyMethodsId = editInfo.returnType;
		returnKeyInfo.value.content = editInfo.returnRemarks;
		Object.assign(orderInfo, res.data);
	}
};

const editOrder = async () => {
	uni.showLoading({
		title: "正在修改订单信息"
	});
	let url = "";
	if (orderType.value == -1) {
		url = `/mall/order/update`;
	} else {
		url = `/mall/order/order-detail/update`;
	}
	let remarks = JSON.stringify(editInfo.remarks);
	let params = {
		...editInfo,
		remarks,
		id: orderId.value
	};
	const res = await api({
		method: "PUT",
		url: url,
		contentType: "json",
		data: params
	});
	if (res.code === 0) {
		uni.showToast({
			title: "修改订单信息成功",
			icon: "none",
			duration: 1000
		});
		setTimeout(() => {
			// uni.redirectTo({ url: `/pages/petsOrder/petsDetails/index?id=${orderId.value}&orderType=${orderType.value}` });
			uni.navigateBack({
				delta: 1
			});
		}, 300);
	}
	uni.hideLoading();
};
onUnload(() => {
	resetUseOrderStore();
});
onLoad(async (options) => {
	orderId.value = options.orderId;
	orderType.value = options.orderType;
});
onShow(async () => {
	await getDetailsData();
});
</script>

<style scoped lang="scss">
.edit_order_box {
	padding: 48rpx 32rpx;
	box-sizing: border-box;

	.edit_instructions_title {
		font-weight: bold;
		font-size: 36rpx;
		color: #1b2120;
	}

	.edit_instructions_box {
		margin-top: 40rpx;
		margin-bottom: 48rpx;

		.instructions_tips {
			font-weight: 400;
			font-size: 28rpx;
			color: #5c5e5e;
		}
	}

	.info_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.label_value_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 48rpx 0;
			box-sizing: border-box;
			border-bottom: 1px solid #e6e6e6;

			.label_box {
				width: 176rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #1a1a1a;
			}

			.value_box {
				display: flex;
				justify-content: space-between;
				width: calc(100% - 176rpx);

				.user_input {
					width: 400rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #1b2120;
					caret-color: #ff6084;
				}

				:deep(.user_input_placeholder) {
					font-weight: 400;
					font-size: 30rpx;
					color: #cacccc;
				}

				.user_value {
					font-weight: 400;
					font-size: 30rpx;
					color: #1b2120;
				}
			}
		}

		.label_value_box:last-child {
			border-bottom: none;
			padding-bottom: 0;
		}

		.label_value_box:first-child {
			padding-top: 0;
		}
	}
}

.footer_btn_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #ffffff;
	padding: 8rpx 32rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
	box-sizing: border-box;

	.config_btn {
		width: 100%;
		height: 88rpx;
	}
}

.c_6363FF {
	color: #6363ff;
}

.mt_16 {
	margin-top: 16rpx;
}
</style>
